.ykl-layout {
  box-sizing: border-box;
  min-height:100%;
  padding-bottom: 51px;
  background-color: #f5f5f5;
}
.top-block{
  position:relative;
  padding-bottom: 50px;
  background-color: #76a6f0;
  color: #fff;
}
.top-block .art-sup-title{
  padding:15px 10px;
  font-size: 24px;
  text-align: center;
  overflow: hidden;
  white-space:nowrap;
  text-overflow:ellipsis;

}
.top-block .to-see-img-text{
  font-size:14px;
  text-align: center;
  margin-bottom:10px;
}
.top-block .art-other-msg{
  font-size:0;
  text-align: center;
}
.top-block .art-other-msg .art-createtime{
  font-size:14px;
  padding:0 10px;
}
.top-block .art-other-msg .art-prev,
.top-block .art-other-msg .art-next{
  font-size:14px;
  text-decoration: underline;
}
.top-block .art-content{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:110px;
  box-sizing:border-box;
  width: 86%;
  box-shadow:0 0 5px #ccc;
  border-radius:5px;
  font-size:16px;
  color:#333;
  line-height:1.5;
  margin-bottom:60px;
  background-color:#fff;
}
.art-content .art-content-detail{
  padding:15px;
  font-size:0;
}
.art-content .art-content-detail img{
  width:100%;
  margin-bottom: 10px;
}
.art-content .art-content-detail p{
  font-size:16px;
}
.fav-or-comment-area{
  
}
.fav-or-comment-area .area-item-title{
  padding-left: 15px;
  font-size:20px;
  height:28px;
  line-height:28px;
  position:relative;
  color:#999;
}
.fav-or-comment-area .area-item-title span{
  font-size:16px;
}
.fav-or-comment-area .area-item-title::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:5px;
  height:28px;
  background-color:#ff906a;
}
.fav-or-comment-area .fav-user{
   position:relative;
   height:32px;
   padding:10px;
}
.fav-or-comment-area .fav-user img{
  position:absolute;
  // left:10px;
  top:10px;
  width:32px;
  height:32px;
  border-radius:50%;
}
// .fav-or-comment-area .fav-user .img2{
//   left:32px;
// }
.fav-or-comment-area .comment-list{
  padding:10px; 
  min-height:32px;
}
.fav-or-comment-area .comment-list .comment-item{
  display:flex;
  padding-bottom:10px;
} 
.fav-or-comment-area .comment-list .comment-item .comment-user-img{
  width:30px;
  height:30px;
  border-radius:50%;
  margin-right: 10px;
} 
.fav-or-comment-area .comment-list .comment-item>div{
  flex:1;
} 
.fav-or-comment-area .comment-list .comment-msg{
  height:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#666;
} 
.fav-or-comment-area .comment-list .comment-msg .user-name{
  font-size:18px;
} 
.fav-or-comment-area .comment-list .comment-msg .comment-time{
  font-size:14px;
} 
.fav-or-comment-area .comment-list .comment-content{
  font-size:16px;
  line-height:1.5;
} 



.bottom-bar-wraper{
  position:fixed;
  left: 0;
  right: 0;
  bottom:0;
  height: 51px
}
.bottom-bar-wraper .bottom-bar{
  max-width: 640px;
  min-width: 300px;
  margin:0 auto;
  height: 50px;
  background-color:#fff;
  border-top:1px solid #e6e6e6;
  display: flex;
  color:#999;
}
.bottom-bar-wraper .bottom-bar p{
  flex:1;
  height:100%;
  line-height:50px;
  text-align:center;
  font-size:16px;
}
.bottom-bar-wraper .bottom-bar p .iconfont::before{
  font-size:18px;
  margin-right: 8px;
}
.bottom-bar-wraper .bottom-bar p .iconfont.has-support{
  color:#ff906a
}
.bottom-bar-wraper .bottom-bar p.to-add-option{
  background-color:#f1f1f1;
}